<template>
  <div>
    <a-input
      :placeholder="l('InXSearchPlaceHolder', l('OrganizationUnitName'))"
      @change="onSearch"
      size="default"
    >
      <template #addonAfter>
        <reload-outlined @click.prevent="reload()" />
      </template>
    </a-input>
    <a-tree
      v-if="treeData.length"
      checkable
      checkStrictly
      defaultExpandAll
      v-model:checkedKeys="selectedKeys"
      @check="onCheck"
      :tree-data="treeData"
    />
  </div>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import { PermissionServiceProxy } from '/@/shared/service-proxies';
  import { arrayService } from '/@/shared/utils';
  import { defineComponent } from 'vue-demi';
  import { ReloadOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'organization-unit-tree',
    components: {
      ReloadOutlined,
    },
    mixins: [AppComponentBase],
    props: {
      data: Object,
    },
    data() {
      return {
        permissionService: new PermissionServiceProxy(),
        permissions: [],
        // loading: false,
        treeData: new Array<any>(),
        treeDataOrgin: new Array<any>(),
        selectedPermissionVal: new Array<any>(),
        checkedKeys: [],
        selectedKeys: new Array<any>(),
        filterText: '',
        // 模糊查询
        dataList: [],
      };
    },
    computed: {},
    created() {
      this.permissionService = new PermissionServiceProxy(this.$apiUrl, this.$api);
    },
    mounted() {
      this.arrToTreeNode();
    },
    methods: {
      arrToTreeNode() {
        let treeData = arrayService.arrToTreeNode(this.data?.allOrganizationUnits, {
          idMapName: 'id',
          parentIdMapName: 'parentId',
          titleMapName: 'displayName',
        });
        this.treeData = treeData;
        this.GetTreeSelected();
        this.treeDataOrgin = [...this.treeData];
      },
      /**
       * 选中
       */
      onCheck(val) {
        this.selectedPermissionVal = val;
        this.$emit('selectedUnitChange', val);
      },
      /**
       * 格式化数据 模糊匹配
       */
      getParentKey(key, tree) {
        let parentKey;
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i];
          if (node.children) {
            if (node.children.some((item) => item.title === key)) {
              parentKey = node.title;
            } else if (this.getParentKey(key, node.children)) {
              parentKey = this.getParentKey(key, node.children);
            }
          }
        }
        return parentKey;
      },
      /**
       * 搜索
       */
      onSearch(e) {
        const value = e.target.value;
        this.treeData = this.rebuildData(value, this.treeDataOrgin);
      },
      rebuildData(value, arr) {
        let newarr: Array<any> = new Array<any>();
        arr.forEach((element) => {
          if (element.title.indexOf(value) > -1) {
            newarr.push(element);
          } else {
            if (element.children && element.children.length > 0) {
              const ab = this.rebuildData(value, element.children);
              const obj = {
                ...element,
                children: ab,
              };
              if (ab && ab.length > 0) {
                newarr.push(obj);
              }
            }
          }
        });
        return newarr;
      },
      /**
       * 刷新
       */
      reload() {
        this.treeData = this.treeDataOrgin;
      },
      GetTreeSelected() {
        for (const item of this.data?.memberedOrganizationUnits) {
          this.selectedKeys.push(this.data?.allOrganizationUnits.find((p) => p.code === item).key);
        }
      },
    },
  });
</script>
